<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />
        <!-- banner轮播图 -->
        <HomeBanner />
      </div>
      <!-- 新鲜好物 -->
      <HomeNew/>
      <!-- 人气推荐 -->
      <HomeHot/>
      <!-- <img src="" ref="imgRef" alt="" width="200" height="200" data-src="https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg">  -->
      <HomeBrand/>
      <HomeProduct/>
    </div>
  </div>
</template>


<script lang="ts" setup name="Home">
    import HomeBanner from './components/HomeBanner.vue';
    import HomeCategory from './components/HomeCategory.vue';
    import HomeNew from './components/HomeNew.vue';
    import HomeHot from './components/HomeHot.vue';
import { onMounted, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core'
import HomeBrand from './components/homeBrand.vue';
import HomeProduct from './components/HomeProduct.vue';
// const imgRef = ref<HTMLImageElement | null>(null)
//   onMounted(() => {
//     const { stop } = useIntersectionObserver(imgRef.value, ([{ isIntersecting }]) => {
//       console.log('是否进入', isIntersecting);
//       if (isIntersecting) {
//         if (imgRef.value) {
//           imgRef.value.src = imgRef.value.dataset.src || ''
//         }
//         stop()
//       }
//     })
//   })
</script>

<style></style>